<section class="hire-audit" id="withdrawAudit">
  <div class="withdraw-nav">
    <ul class="contract-flow-nav">
      <li v-for="(item, index) in withdrawList" @click="withdrawNav(index)" :class="{active: index == withdrawListAct}">
        {{item}}</li>
    </ul>
  </div>
  <section v-show="widthFlagbill" class="pl-24 pr-24 pt-15">
    <!-- 账单信息 -->
    <div class="js-bill pb-10 mt-15">

      <div class="js-progress">
        <div class="js-progress-content">已收：<em class="received">0.00</em>元 / <em class="receivable">0.00</em>元，<em
            class="proportion">0</em>%
          <div class="general"></div>
        </div>
        <span class="progress-bar"></span>
      </div>
      <div class="bg-white box-i-shadow border box-o-shadow js-bill-container">
        <div class="text-center dy-flex color-999">
          <div class="dy-fx-3 line-height-45 ellipsis-1">账单编号</div>
          <div class="dy-fx-4 line-height-45 ellipsis-1">租约期</div>
          <div class="dy-fx-2 line-height-45 ellipsis-1">收款截止日</div>
          <div class="dy-fx-2 line-height-45 ellipsis-1">应收金额</div>
          <div class="dy-fx-2 line-height-45 ellipsis-1">实收日期</div>
          <div class="dy-fx-2 line-height-45 ellipsis-1">实收金额</div>
          <div class="dy-fx-1 line-height-45 ellipsis-1">状态</div>
        </div>
        <div class="content-list-contract text-center ">
          <div class="clearfix border-t">
            <!--账单列表-->
          </div>
        </div>
      </div>

      <div class="mt-15 pt-10" v-if="showCreateBill">
        <hl-button type="outline" @on-click="createBill" v-if="permissions.indexOf('c174') > -1">新建账单</hl-button>
      </div>
    </div>
  </section>

  <section v-show="widthFlagInfo" class="pl-24 pr-24">
    <div class="ReasonWrap" v-if="(data.auditState == 'FBP')  && (data.fbpReason.length)">
      <div v-if="data.auditState == 'FBP'" class="fbpReason">{{data.fbpReason}}</div>
    </div>
    <div class="ReasonWrap" v-if="(data.auditState == 'FCP')  && ( data.fcpReason.length)">
      <div v-if="data.auditState == 'FCP'" class="fcpReason">{{data.fcpReason}}</div>
    </div>
    <div class="mt-15 pb-10">
      <!-- 基本信息 -->
      <div class="mt-15 pb-10">
        <h4 class="font-14 font-wt">基本信息</h4>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">退租时间：</div>
          <div class="col-md-9 line-height-34">
            {{data.withdrawDate | formatDate}}
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">退租单号：</div>
          <div class="col-md-9 line-height-34">{{data.wCode}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">状态：</div>
          <div class="col-md-3 line-height-34 color-orange">
            {{data.auditState | auditState}}
          </div>
          <div class="col-md-1 pd-0 line-height-34" v-if="data.auditState == 'WJS'">账单编号：</div>
          <div class="col-md-3 line-height-34 color-orange" v-if="data.auditState == 'WJS'">
            <a :href="'#/billDetail?id='+billsId +'&ddtab=true&aid='+data.contractId"
              target="_blank">{{billsno || '--'}}</a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">合同编号：</div>
          <div class="col-md-3 line-height-34">
            <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.cCode}}</a>
          </div>
          <div class="col-md-1 pd-0 line-height-34">管理编号：</div>
          <div class="col-md-3 line-height-34">
            <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.mCode}}</a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">合同名称：</div>
          <div class="col-md-9 line-height-34">
            {{contratdata.contractName ? contratdata.contractName : '--'}}
          </div>
        </div>
        <div class="row">
          <div class="col-md-1 pd-0 line-height-34">租户名称：</div>
          <div class="col-md-9 line-height-34">{{contratdata.zlfCompany}}</div>
        </div>
      </div>
      <!-- 出租资源 -->
      <div class="rent-resource">
        <h4 class="font-14">出租资源</h3>
          <!-- 单元 -->
          <div v-if="building.length">
            <div class="clearfix line-height-34">
              <div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
              <div class="pull-right cursor" @click="checkDetailMes('unit')">
                <span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
                <span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
                <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
                <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
              </div>
            </div>
            <div class="unit-table" v-if="unitOpenFlag">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-2">项目</div>
                <div class="dy-fx-2">楼栋</div>
                <div class="dy-fx-1">楼层</div>
                <div class="dy-fx-4">单元</div>
              </div>
              <div class="tb-content">
                <ul class="dy-flex project-cr">
                  <li class="dy-fx-2 project">{{contratdata.projectName}}</li>
                  <li class="dy-fx-7">
                    <!-- 楼栋 -->
                    <ul class="dy-flex building-cr" v-for="(item,index) in building">
                      <li class="dy-fx-2 building">{{item.buildingName}}</li>
                      <li class="dy-fx-5">
                        <!-- 楼层 -->
                        <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                          <li class="dy-fx-1 floor">{{item1.floorName}}</li>
                          <li class="dy-fx-4 unit">
                            <!-- 单元 -->
                            <b v-for="(item2,index2) in item1.unit" @click="getUnitDetails(item1.unitId[index2])"><a
                                href="javascript:;">{{item2}}</a><i v-if="index2 + 1 !== item1.unit.length">、</i></b>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 工位 -->
          <div v-if="wp.length">
            <div class="clearfix line-height-34">
              <div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
              <div class="pull-right cursor" @click="checkDetailMes('wp')">
                <span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
                <span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
                <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
                <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
              </div>
            </div>
            <div class="position-table border" v-if="wpOpenFlag">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-3">项目</div>
                <div class="dy-fx-3">楼栋</div>
                <div class="dy-fx-1">楼层</div>
                <div class="dy-fx-1">单元</div>
                <div class="dy-fx-1">工位数</div>
                <div class="position-item">工位</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
                  :floorId="item.floorId" :unitId="item.unitId">
                  <div class="dy-fx-3">{{contratdata.projectName}}</div>
                  <div class="dy-fx-3">{{item.buildingName}}</div>
                  <div class="dy-fx-1">{{item.floorName}}</div>
                  <div class="dy-fx-1">{{item.unitName}}</div>
                  <div class="dy-fx-1">{{item.num}}</div>
                  <div class="position-item">
                    <span class="position">
                      <b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i
                          v-if="index1 + 1 !== item.positions.length">、</i></b>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 车位 -->
          <div v-if="st.length">
            <div class="clearfix line-height-34">
              <div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
              <div class="pull-right cursor" @click="checkDetailMes('st')">
                <span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
                <span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
                <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
                <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
              </div>
            </div>
            <div class="position-table border" v-if="stOpenFlag">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-3">项目</div>
                <div class="dy-fx-3">楼栋</div>
                <div class="dy-fx-1">楼层</div>
                <div class="dy-fx-1">单元</div>
                <div class="dy-fx-1">车位数</div>
                <div class="position-item">车位</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
                  :floorId="item.floorId" :unitId="item.unitId">
                  <div class="dy-fx-3">{{contratdata.projectName}}</div>
                  <div class="dy-fx-3">{{item.buildingName}}</div>
                  <div class="dy-fx-1">{{item.floorName}}</div>
                  <div class="dy-fx-1">{{item.unitName}}</div>
                  <div class="dy-fx-1">{{item.num}}</div>
                  <div class="position-item">
                    <span class="position">
                      <b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i
                          v-if="index1 + 1 !== item.positions.length">、</i></b>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
      </div>
      <!-- 冲突账单确认 -->
      <div class="rent-resource" v-if="conflictBills.length">
        <h3 class="he-title mb-10">冲突账单确认</h3>
        <div v-if="conflictBills.length">
          <div style="color:#ec4151">此次退租（{{data.withdrawDate | formatDate}}）影响了以下账单</div>
          <div class="mb-10">注：{{data.withdrawDate | formatDate}}之后的尚未收款的账单直接作废，不显示在下表</div>
          <div></div>
          <div class="unit-table">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-1">账单编号</div>
              <div class="dy-fx-3">退租前</div>
              <div class="dy-fx-3">退租后</div>
            </div>
            <div class="tb-content-plus">
              <ul class="dy-flex border-b" v-for="item in conflictBills">
                <li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;">{{item.billNo}}
                </li>
                <li class="dy-fx-3 border-r rentClass">
                  <section v-for="(single,one) in item.expenses" v-if="single.amount">
                    <div v-if="!one">
                      <div><p class="table-gray-title">账单周期</p></div>
                      <span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
                    </div>
                    <div class="dy-flex" style="flex-direction: column;">
                      <div><p class="table-gray-title mt-10">{{single.expenseName}}</p></div>
                      <span>应收金额：{{single.amount.amountReceive}}元</span>
                      <span>已收金额：{{single.amount.amountPayed}}元
                        <span style="color:#ec4151" v-if="single.amount.amountRefund > 0">（应退：{{single.amount.amountRefund}}元）</span>
                      </span>
                      <span>减免金额：{{single.amount.derateExpense}}元</span>
                      <span>结转金额：{{single.amount.carryOverAmount}}元</span>
                    </div>
                  </section>
                  <section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
                </li>
                <li class="dy-fx-3 rentClass">
                  <section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
                    <div v-if="!one">
                      <div><p class="table-gray-title">账单周期</p></div>
                      <span class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
                    </div>
                    <div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
                      <div><p class="table-gray-title mt-10">{{single.expenseName}}</p></div>
                      <span>应收金额：{{single.withdrawAmount.amountReceive}}元</span>
                      <span>已收金额：{{single.withdrawAmount.amountPayed}}元
                        <span style="color:#ec4151" v-if="single.withdrawAmount.amountRefund > 0">（应退：{{single.withdrawAmount.amountRefund}}元）</span>
                      </span>
                      <span>减免金额：{{single.withdrawAmount.derateExpense}}元</span>
                      <span>结转金额：{{single.withdrawAmount.carryOverAmount}}元</span>
                    </div>
                  </section>
                  <section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align: center;" v-else>本次退租无账单需要确认</div>
      </div>
      <!-- 应收部分 -->
      <div class="mt-15 pt-10 border-t">
        <h4 class="font-14 font-wt">应收部分</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'R'" v-for="item in data.expenses">
              <span class="pull-left mr-10">{{item.name}}：</span>
              <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
              <b class="ml-10" v-if="item.memo">(备注：{{item.memo}})</b>
            </li>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">应收合计：</span>
              <span class="pull-left color-primary">{{data.amountReceived | formatNum}}</span>元
            </li>
          </ul>
        </div>
      </div>
      <!-- 应退部分 -->
      <div class="mt-15 pt-10 border-t">
        <h4 class="font-14 font-wt">应退部分</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'W'" v-for="item in data.expenses">
              <span class="pull-left mr-10">{{item.name}}：</span>
              <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
              <b class="ml-10" v-if="item.memo">(备注：{{item.memo}})</b>
            </li>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">应退合计：</span>
              <span class="pull-left color-primary">{{data.amountRefund | formatNum}}</span>元
            </li>
          </ul>
        </div>
      </div>
      <!-- 费用合计 -->
      <div class="mt-15 pt-10 border-t">
        <h4 class="font-14 font-wt">费用合计</h4>
        <div class="hire-amount">
          <ul>
            <li class="clearfix line-height-34">
              <span class="pull-left mr-10 color-primary">费用合计：</span>
              <span
                class="pull-left color-primary">{{Math.abs(data.amountReceived-data.amountRefund).toFixed(2) | formatNum}}</span>元
              <span v-if="data.amountReceived-data.amountRefund > 0">(应收)</span>
              <span v-if="data.amountReceived-data.amountRefund < 0">(应退)</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 退租原因 -->
      <div class="mt-15 pt-10 border-t hire-cause-audit">
        <h4 class="font-14 font-wt">退租原因</h4>
        <div class="hire-amount">
          <ul class="clearfix">
            <li>{{data.reason}}</li>
          </ul>
        </div>
      </div>
      <!-- 待办事项 -->
      <div class="mt-15 pt-10 border-t hire-matter-audit">
        <h4 class="font-14 font-wt">待办事项</h4>
        <div class="hire-amount">
          <ul class="clearfix">
            <li v-for="(item,index) in data.todoList">{{index+1}}、{{item}}</li>
          </ul>
        </div>
      </div>
      <!-- 存档图片 -->
      <div class="mt-15 pt-10 border-t hire-image">
        <h4 class="font-14 font-wt">存档图片</h4>
        <ul class="clearfix">
          <li v-for="(item, index) in data.pics" @click="bigPicShow(data.pics, index)"><img :src="item" alt=""></li>
        </ul>
      </div>
      <!-- 备注 -->
      <div class="mt-15 pt-10 border-t hire-other">
        <h4 class="font-14 font-wt">备注</h4>
        <div class="memo">{{data.memo}}</div>
      </div>
      <!-- 审核状态 -->
      <div class="mt-15 pt-10 border-t  hire-other">

        <hl-button type="outline" @on-click="delFlag = !delFlag" v-if="data.auditState == 'ZF'">删除</hl-button>
        <a :href="'#/withdrawAuditEdit?id='+zid+'&ddtab=true&state='+data.auditState"
          class="n-btn-primary br-4 btn mr-5"
          v-if="data.auditState == 'FBP' || data.auditState == 'FCP'  || data.auditState == 'CG'"
          style="color:#fff !important">编辑</a>
        <!--业务审核-->
        <hl-button type="outline" @on-click="invalid"
          v-if=" data.auditState == 'CG' ||  data.auditState == 'FCP' ||  data.auditState == 'FBP' "
          v-show="permissions.indexOf('c56') > -1">作废</hl-button>
        <hl-button type="outline" @on-click="checkWithout"
          v-if=" data.auditState == 'FBP' || data.auditState == 'FCP' || data.auditState == 'CG' "
          v-show="permissions.indexOf('c57') > -1">提交业务审核</hl-button>
      </div>
  </section>

  <section v-show="widthFlagFile" class="pl-24 pr-24">
    <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
    <div class="mt-15 hire-other">
      <div class="upload-head-contract clearfix border-b pb-10">
        <div class="pull-left font-16 line-height-34">文件列表</div>
        <div class="pull-right upload-files">
          <hl-button @on-click="uploadFile"
            v-if="(data.auditState == 'CG' || data.auditState == 'FBP' || data.auditState == 'FCP') && permissions.indexOf('c93') > -1">
            上传</hl-button>
        </div>
      </div>
      <ul class="clearfix">
        <li class="clearfix border-b" v-for="(item,index) in data.files">
          <div class="pull-left" style="line-height: 45px;"><span
              class="icon-Nav-contract-file mr-5"></span>{{data.fileNames ? data.fileNames[index] : null}}
          </div>
          <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
            <a class="icon-Gm-delete opera-but-first" @click="delFiles(item,index)"
              v-if="(data.auditState == 'CG' || data.auditState == 'FBP' || data.auditState == 'FCP') && permissions.indexOf('c94') > -1">
              <b>删除</b>
            </a>
            <span class="block-D-P-D"
              v-if="(data.auditState == 'CG' || data.auditState == 'FBP' || data.auditState == 'FCP') && permissions.indexOf('c94') > -1"></span>
            <a class="icon-GM-preview" @click="previewImage(item)">
              <b>预览</b>
            </a>
            <span class="block-D-P-D"></span>
            <a :href="item.url" :download="item.name" class="icon-Gm-download">
              <b>下载</b>
            </a>
          </p>
        </li>
      </ul>
    </div>
  </section>

  <!-- /*业务审核不通过*/ -->
  <div :class="{pop:true, hide:ywflag}">
    <div class="head-pop font-16"><span class="js-fr-txt">审核拒绝</span>
      <button class="fw-close absolute js-close-cost" type="button">×</button>
    </div>
    <div class="content-pop ptb-10 plr-24">
      <textarea name="name" rows="8" class="form-control js-memo-q" placeholder="审核不通过原因说明（非必填）"
        v-model="msgyw"></textarea>
    </div>
    <div class="fw-button">
      <hl-button type="primary" @on-click="FinWBPnAudit">确认</hl-button>
      <hl-button type="outline" @on-click="ywshowhide(true)">取消</hl-button>
    </div>
  </div>

  <!-- /*财务审核不通过*/ -->
  <div :class="{pop:true, hide:cwflag}">
    <div class="head-pop font-16"><span class="js-fr-txt">审核拒绝</span>
      <button class="fw-close absolute js-close-cost" type="button">×</button>
    </div>
    <div class="content-pop ptb-10 plr-24">
      <textarea name="name" rows="8" class="form-control js-memo-q" placeholder="审核不通过原因说明（非必填）"
        v-model="msgcw"></textarea>
    </div>
    <div class="fw-button">
      <hl-button type="primary" @on-click="FinWCPnAudit">确认</hl-button>
      <hl-button type="outline" @on-click="cwshowhide(true)">取消</hl-button>
    </div>
  </div>

  <div class="del-contract-fixed" v-if="delFlag">
    <div class="del-contract">
      <p>删除后不可恢复！</p>
      <div class="del-btn">
        <hl-button type="primary" @on-click="delContract">确认删除</hl-button>
        <hl-button type="outline" @on-click="delFlag = !delFlag">取消删除</hl-button>
      </div>
    </div>
  </div>
  <div class="upload-files"></div>
  <!-- 单元详情 -->
  <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>

  <!--遮罩-->
  <div :class="{backdrop:true, hide:cwflag}"></div>
  <div :class="{backdrop:true, hide:ywflag}"></div>

</section>
<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
<script src="modules/withdraw/scripts/withdraw_audit.js" charset="utf-8"></script>
<script src="modules/bill/scripts/bill_progress0.js" charset="utf-8"></script>
<style>
  .loadprogress {
    position: fixed;
    z-index: 999999;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 500px;
    font-size: 12px;
    text-indent: 3px;
    line-height: 20px;
  }

  .tb-content-plus li {
    min-height: 40px;
    display: flex;
    padding: 10px;
  }

  .rentClass {
    flex-direction: column;
    align-items: flex-start;
  }

  .rentClass>div {
    display: flex;
    flex-direction: column;
  }

  .rentClass>div div {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
  }

  .rentClass>div span {
    margin-bottom: 10px;
  }

  .invalidCalss {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
  }

  .table-gray-title {
    line-height: 30px;
    padding: 0 15px;
    background: rgba(240, 240, 240, 1);
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 10px;
  }
</style>